<template>
  <div class="main-page">
    <el-form ref="form">
      <!-- 搜索栏 -->
      <BaseSearchBar></BaseSearchBar>
    </el-form>
    <!-- 表单 -->
    <el-card
      :body-style="{ padding: '0px' }"
      class="box-card"
    >
      <!-- <div class="SearchT">
        <div class="tableLable">数据管理列表</div>
        <el-button
          type="danger"
          class="BatchDeleBtn"
          style="width:80px"
          size="small"
          >批量删除</el-button
        >

        <el-button
          type="primary"
          class="exportBtn"
          style="width:80px"
          size="small"
          >导出</el-button
        >
      </div> -->
      <div class="tableStyle">
        <el-table
          ref="multipleTable"
          class="card-table"
          :data="tableData"
          tooltip-effect="dark"
          :header-cell-style="{ background: '#3F9DFD', color: '#FFF' }"
          size="medium"
          stripe
          border
        >
          >
          <!-- <el-table-column label="全选" type="selection" width="40" /> -->
          <el-table-column
            label="序号"
            type="index"
            width="50"
          >
          </el-table-column>

          <el-table-column
            prop="OperativeID"
            label="手术编码"
            show-overflow-tooltip
            width="120"
          />
          <el-table-column
            prop="OperativeName"
            label="手术名称"
            show-overflow-tooltip
            width="150"
          />
          <el-table-column
            prop="UseAntibiotics"
            label="预防使用抗菌药物"
            show-overflow-tooltip
            width="140"
          />
          <el-table-column
            prop="medicaCourse"
            label="手术预防用药疗程(小时）"
            show-overflow-tooltip
            width="180"
          />
          <el-table-column
            prop="rational1"
            label="≥联不合理"
            show-overflow-tooltip
            width="100"
          />
          <el-table-column
            prop="rational2"
            label="≥种不合理"
            show-overflow-tooltip
            width="100"
          />
          <el-table-column
            prop="AntibioticsLevel"
            label="预防使用抗菌药物级别"
            show-overflow-tooltip
            width="165"
          />
          <el-table-column
            prop="Maintain"
            label="维护人员"
            show-overflow-tooltip
            width="100"
          />
          <el-table-column
            prop="MaintainTime"
            label="维护时间"
            show-overflow-tooltip
          />
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="1"
            layout="total, sizes, prev, pager, next, jumper"
            :total="4"
            background
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import BaseSearchBar from "./BaseSearchBar";

export default {
  name: "MainPage",
  components: {
    BaseSearchBar
  },
  methods: {
    // 监听pagesize改变的事件
    handleSizeChange(newSize) {
      console.log(newSize);
    },
    // 当前展示的页面
    handleCurrentChange(newPage) {
      console.log(newPage);
    }
  },
  data() {
    return {
      // 列表的参数对象
      queryInfo: {
        query: "",
        // 当前的页数
        pagenum: 1,
        // 当前页显示多少数据
        pagesize: 5
      },
      tableData: [
        {
          OperativeID: "W0327",
          OperativeName: "筛前神经封闭术",
          UseAntibiotics: "能使用",
          medicaCourse: "2",
          rational1: "1",
          rational2: "1",
          AntibioticsLevel: "有",
          Maintain: "管理员",
          MaintainTime: "2019-11-15 18:29:54"
        },
        {
          OperativeID: "W0327",
          OperativeName: "筛前神经封闭术",
          UseAntibiotics: "能使用",
          medicaCourse: "2",
          rational1: "1",
          rational2: "1",
          AntibioticsLevel: "有",
          Maintain: "管理员",
          MaintainTime: "2019-11-15 18:29:54"
        },
        {
          OperativeID: "W0327",
          OperativeName: "筛前神经封闭术",
          UseAntibiotics: "能使用",
          medicaCourse: "2",
          rational1: "1",
          rational2: "1",
          AntibioticsLevel: "有",
          Maintain: "管理员",
          MaintainTime: "2019-11-15 18:29:54"
        },
        {
          OperativeID: "W0327",
          OperativeName: "筛前神经封闭术",
          UseAntibiotics: "能使用",
          medicaCourse: "2",
          rational1: "1",
          rational2: "1",
          AntibioticsLevel: "有",
          Maintain: "管理员",
          MaintainTime: "2019-11-15 18:29:54"
        },
        {
          OperativeID: "W0327",
          OperativeName: "筛前神经封闭术",
          UseAntibiotics: "能使用",
          medicaCourse: "2",
          rational1: "1",
          rational2: "1",
          AntibioticsLevel: "有",
          Maintain: "管理员",
          MaintainTime: "2019-11-15 18:29:54"
        },
        {
          OperativeID: "W0327",
          OperativeName: "筛前神经封闭术",
          UseAntibiotics: "能使用",
          medicaCourse: "2",
          rational1: "1",
          rational2: "1",
          AntibioticsLevel: "有",
          Maintain: "管理员",
          MaintainTime: "2019-11-15 18:29:54"
        },
        {
          OperativeID: "W0327",
          OperativeName: "筛前神经封闭术",
          UseAntibiotics: "能使用",
          medicaCourse: "2",
          rational1: "1",
          rational2: "1",
          AntibioticsLevel: "有",
          Maintain: "管理员",
          MaintainTime: "2019-11-15 18:29:54"
        },
        {
          OperativeID: "W0327",
          OperativeName: "筛前神经封闭术",
          UseAntibiotics: "能使用",
          medicaCourse: "2",
          rational1: "1",
          rational2: "1",
          AntibioticsLevel: "有",
          Maintain: "管理员",
          MaintainTime: "2019-11-15 18:29:54"
        },
        {
          OperativeID: "W0327",
          OperativeName: "筛前神经封闭术",
          UseAntibiotics: "能使用",
          medicaCourse: "2",
          rational1: "1",
          rational2: "1",
          AntibioticsLevel: "有",
          Maintain: "管理员",
          MaintainTime: "2019-11-15 18:29:54"
        },
        {
          OperativeID: "W0327",
          OperativeName: "筛前神经封闭术",
          UseAntibiotics: "能使用",
          medicaCourse: "2",
          rational1: "1",
          rational2: "1",
          AntibioticsLevel: "有",
          Maintain: "管理员",
          MaintainTime: "2019-11-15 18:29:54"
        }
      ]
    };
  }
};
</script>
<style scoped>
.el-card {
  margin-left: 3px;
}
.SearchT {
  display: flex;
  justify-content: flex-end;
  height: 40px;
  align-items: center;
  background-color: #e6edf3;
  font-size: 14px;
}
.tableLable {
  flex: 1;
  text-align: left;
  margin-left: 15px;
  letter-spacing: 2px;
  font-size: 14px;
  color: #32a6f3;
  font-weight: bold;
}
.exportBtn {
  margin-right: 23px;
}
.BatchDeleBtn {
  margin-right: 15px;
}
.tableStyle {
  width: 100%;
  height: 100%;
}
.card-table {
  width: 100%;
  height: 75%;
}
.block {
  text-align: center;
  margin-top: 12px;
  margin-bottom: 12px;
}
</style>
